<html>
<head>
<script type="text/javascript" src="gadget.js">
</script>

<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">

#modtitle #task_list {
    width: 500px;
}

#modtitle #tasks {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#modtitle #tasks li {
    width: 100%;
    margin: 0;
    float: left;
    clear: both;
}

.title {
    width: 100%;
}

.task_name_title {
    width: 49%;
    font: bold;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    text-align: center;
    float: left;
    background-color: bisque;
}

.current_time_title {
    width: 18%;
    font: bold;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: bisque;
}

.total_time_title {
    width: 18%;
    font: bold;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: bisque;
}

.status_title {
    width: 14%;
    font: bold;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: bisque;
}

.handle {
    width: 10px;
    height: 100%;
    font: normal;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-left: hidden;
    border-bottom: beige;
    border-top: beige;
    text-align: center;
    float: left;
    background-color: burlywood;
    vertical-align: middle;
    cursor: move;
}

.task_name {
    width: 49%;
    height: 25px;
    font: normal;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-top: beige;
    text-align: left;
    float: left;
    background-color: beige;
    vertical-align: middle;
	overflow: hidden;
	white-space: nowrap;
}

.current_time {
    width: 18%;
    height: 25px;
    font: normal;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-top: beige;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: beige;
    vertical-align: middle;
}

.total_time {
    width: 18%;
    height: 25px;
    font: normal;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-top: beige;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: beige;
    vertical-align: middle;
}

.status {
    width: 14%;
    height: 25px;
    font: normal;
    border: solid;
    border-collapse: collapse;
    border-width: thin;
    border-top: beige;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: beige;
    vertical-align: middle;
}

.activeTimer {
    width: 18%;
    height: 25px;
    font: normal;
    color: black;
    border: solid;
    border-color: black;
    border-collapse: collapse;
    border-width: thin;
    border-top: beige;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: beige;
    vertical-align: middle;
}

.oldTimer {
    width: 18%;
    height: 25px;
    font: normal;
    color: darkgray;
    border: solid;
    border-color: black;
    border-collapse: collapse;
    border-width: thin;
    border-top: beige;
    border-left: hidden;
    text-align: center;
    float: left;
    background-color: beige;
    vertical-align: middle;
}

</style>
</head>
<body>
    <input type="button" title="Add Task" value="Add Task" onclick="addTask__MODULE_ID__();"/><br/>
    <input type="button" title="Display Data" value="Display Data" onclick="displayEventData__MODULE_ID__();"/>

    <div id="modtitle">
        <div id="task_list">
            <div id="title" class="title">
                <div id="task_name_title_div" class="task_name_title">Task Name</div>
                <div id="current_time_title_div" class="current_time_title">Current</div>
                <div id="total_time_title_div" class="total_time_title">Total</div>
                <div id="status_title_div" class="status_title">Status</div>
            </div>
            <ul id="tasks">
            </ul>
        </div>
        
        <script type="text/javascript" language="javascript">
            Sortable.create('tasks_div', {ghosting:true,constraint:false})
        </script>

        <div id="eventDiv">
            
        </div>
    </div>
</body>
</html>